<template>
	<view class="sales-contanier">
		<view class="sales-menu">
			<view class="li" :class="{active:isActive==0}" @click="menu(0)">{{leftTitle}}</view>
			<view class="li" :class="{active:isActive==1}" @click="menu(1)">{{rightTitle}}</view>
		</view>
		<view class="sales-cont">
			<view class="sales-box" v-if="isActive==0">
				<view class="sales-list">
					<view class="li" @click="navigateGoods(item.id)" v-for="(item,index) in leftList" :key="index" >
						<image :src="item.logo"/>
						<h3>{{item.title}}</h3>
						<p>¥{{item.price}}</p>
					</view>
				</view>
			</view>
			<view class="sales-box" v-if="isActive==1">
				<view class="sales-list">
					<view  class="li" @click="navigateGoods(item.id)" v-for="(item,index) in rightList" :key="index">
						<image :src="item.logo"/>
						<h3>{{item.title}}</h3>
						<p>¥{{item.price}}</p>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { rankingList } from '@/api/utils';
	export default {
		props:{
			leftTitle:{
				type:String,
				dedefault:'销量排行榜'
			},
			rightTitle:{
				type:String,
				dedefault:'猜你喜欢'
			},
			leftList:{
				type:Array,
				dedefault:[]
			},
			rightList:{
				type:Array,
				dedefault:[]
			},
		},
		data() {
			return{
				type:1,
				isActive:0,
			}
		},
		mounted(){
		/* 	this.ranking(1)
			this.likeList(2) */
		},
		methods:{
			navigateGoods(id){
				this.$Shop.navigateGoods(id);
			},
			navigateTo(url){
				uni.navigateTo({
				    url: url
				});
			},
			menu(index){
				this.isActive = index;
			},
			ranking(type){
				rankingList(type).then((res)=>{
					if(type==1){
						this.rankingList=res.data.datas;
					}else{
						this.likeList=res.data.datas;
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sales-contanier{
		background: #fff;
		.sales-menu{
			background: #fff;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #d1d1d1;
			.li{
				width:50%;
				text-align: center;
				height: 40px;
				line-height: 40px;
				font-size:16px;
				&.active{
					color:#FF273F;
				}
			}
		}
		.sales-list{
			display: flex;
			justify-content:flex-start;
			flex-wrap: wrap;
			width:720rpx;
			margin:0 auto;
			background: #fff;
			padding-bottom:20rpx;
			.li{
				width:232rpx;
				margin-right:5px;
				image{
					width:100%;
					height: 260rpx;
				}
				margin-top:20rpx;
				h3{
					font-size:12px;
					color:#555;
					line-height: 18px;
					margin:6px 0;
					overflow: hidden;
					text-overflow: ellipsis;
					display:-webkit-box; 
					-webkit-box-orient:vertical; 
					-webkit-line-clamp:2; 
				}
				p{
					font-size:14px;
					color:#fd8197;
					font-weight: bold
				}
				&:nth-of-type(3n){
					margin-right:0;
				}
			}
		}
	}
</style>
